<template>
	<no-data v-if="!orderList || orderList.length<1"></no-data>
	<view v-else>
		<view class="order-item"
			v-for="(item, index) in orderList" :key="index">
			<view class="base-info">
				<text>{{item.updateDate}}</text>
				<text>订单号：{{item.order_num}}</text>
			</view>
			<course-item 
				v-for="(course, index2) in item.courseList" 
				:key="index2" :item="course"
			>
			</course-item>
			<view class="shifu">
				<text>实付：</text>
				<text>￥{{item.pice}}</text>
			</view>
			
			<view class="option center space-between">
				<!-- 订单状态：0待支付，1交易成功，2交易关闭 -->
				<text class="red" v-if="item.status === 0">待支付</text>
				<text class="grey" v-if="item.status === 1">交易成功</text>
				<text class="grey" v-if="item.status === 2">交易关闭</text> 
				<view>
					<!-- 
					 0待支付: 取消订单/立即支付
					 1交易成功: 不显任何按钮
					 2交易已取消:显示删除按钮
					 -->
					<button @click="orderCancel(item.id)" v-if="item.status === 0" type="default" size="mini">取消订单</button>
					<button @click="orderPay(item)" v-if="item.status === 0" type="warn" size="mini">立即支付</button>
					<button @click="orderDelete(item.id)" v-if="item.status === 2" size="mini">删除订单</button>
				</view>
			</view>
		</view>
		
		</view>
</template>

<script>
	import courseItem from '@/components/common/course-item.vue'
	
	import api from '@/api/order.js'
	
	export default {
		components: {courseItem},
		
		data() {
			return {
				orderList: [], // 订单列表数据
				loading: false, // 是否点击了ios弹窗中的按钮
				order: {}, //立即支付的订单数据
			}
		},
		
		
		onLoad() {
			
			this.loadData()
			
			// #ifdef APP-PLUS
			// 保证ios平台上的app
			this.isIOS = uni.getSystemInfoSync().platform === 'ios'
			// #endif
		},
		
		methods: {
			
			async loadData() {
				// 查询用户订单列表
				// console.log("查询用户订单列表",)
				let  userid = uni.getStorageSync('userInfo').id
				const {data} = await api.getUserOrderList(userid)
				console.log("后端的参数：",data)
				this.orderList = data
			},
			
			// 取消订单
			orderCancel(orderid) {
				console.log("取消订单",orderid)
				uni.showModal({
					content: '确定取消该订单记录？',
					success: async (res) => {
						// 点击确定，进行调用接口取消订单
						if(res.confirm) {
							// const res = await api.deleteOrder(orderid)
							const res = await api.canceloder(orderid)
							if(res.code === 20000) {
								this.$util.msg('取消成功')
								// 重新加载列表数据
								this.loadData()
							}else {
								this.$util.msg('取消失败，请重试')
							}
						}
					}
				})
			},
			
			// 删除订单
			orderDelete(orderid) {
				uni.showModal({
					content: '确定删除该订单记录？',
					success: async (res) => {
						// 点击确定，进行调用接口删除订单
						if(res.confirm) {
							const res = await api.deleteOrder(orderid)
							if(res.code === 20000) {
								this.$util.msg('删除成功')
								// 重新加载列表数据
								this.loadData()
							}else {
								this.$util.msg('删除失败，请重试')
							}
						}
					}
				})
			},
			
			// 点击订单列表中的 立即支付 按钮
			async orderPay(order) {
					console.log("立即支付的订单数据：",order)
					this.order = order
				
					// 非app端ios平台，则跳转订单支付页
					const price = this.order.priceDiscount || this.order.pricePayable
					const data = {price, orderId: this.order.orderId}
					uni.showModal({
						content: '确认是否支付？',
						success: async (res) => {
							// 点击确定，进行调用接口删除订单
							if(res.confirm) {
								let courseid = this.order.courseList[0].id
								let  userid = uni.getStorageSync('userInfo').id
								let { message, code } = await api.orderPay({ course: { id:courseid }, userid , orderid : this.order.id})
								if(code === 20000) {
									this.$util.msg('支付成功')
									// 重新加载列表数据
									this.loadData()
								}else {
									this.$util.msg('支付失败，请重试')
								}
							}
						}
					})
	
			},
			
			// 显示隐藏ios支付窗口
			showHidePay() {
				this.isShow = !this.isShow
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 25rpx;
		border-bottom: $mxg-underline;
		.base-info {
			color: $mxg-text-color-black;
			text:first-child {
				margin-right: 20rpx;
			}
		}
		.shifu {
			text-align: right;
			line-height: 70rpx;
			text:last-child {
				font-size: 35rpx;
				color: $mxg-text-color-red;
			}
		}
		
		.option {
			button {
				font-size: 20rpx;
				margin-left: 10rpx;
			}
			.red {
				color: $mxg-text-color-red;
			}
			.grey {
				color: $mxg-text-color-grey;
			}
		}
	}

	.bottom-ios {
		z-index: 100;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 30rpx 40rpx;
		border-top: $mxg-underline;
		
		.title {
			font-size: 38rpx;
			margin-bottom: 20rpx;
			text-align: center;
			text:first-child {
				flex: 1;
				margin-left: 70rpx;
			}
			text:last-child {
				color: $mxg-text-color-grey;
				font-size: 35rpx;
			}
		}
		
		.price {
			font-size: 30rpx;
			line-height: 90rpx;
			text:last-child {
				color: $mxg-text-color-red;
			}
		}
		
		.btn {
			background-color: $mxg-color-primary;
			color: #FFFFFF;
			border-radius: 50rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			margin-top: 30rpx;
			&::after {
				// 加载中隐藏边框
				border: none;
			}
		}
	}
</style>
